Documentation & help - Camelus - nature tones template

Camelus - nature tones template

Theme documentation & reference by rvision. Created on 06 Mar 2011

Table Of Contents

  1. Theme overview
  2. HTML Structure
  3. CSS Styles
  4. JavaScripts
  5. Contact Form(s) Configuration
  6. PSD Files
  7. How to...?
  8. Something's not working, what should I do?
  9. Sources and Credits
  10. Changelog
Thank You!

Thank you for purchasing Camelus - nature tones template.

Please read documentation before sending any requests, since this file has all the information needed to help you to customize your template. 

If you have any questions that are beyond the scope of this help file, please use a contact form on my profile page to contact me. If you are happy with the theme, please take a moment to rate it on the ThemeForest website.

A) Theme overview top ↑

This design is good choice for an eco, environmental, recycling, non profits, grassroots, organizations, etc. or nature business website. But it can easily be modified to reflect any genre. Some buyers used this theme for festivals, medicine-related websites, science websites, etc.

Features:

Versions

Theme comes in 2 versions: PHP version and HTML version. If you have the option to choose which one, go for the PHP version.

Automatic update notifications

This documentation file also has a update notifier script which checks your theme version with a latest version on the theme on themeforest. If a newer version of the theme is available, it will show you the download link and changes made so you can download an updated version.

Note
The .php version of the theme makes use of the include function which allows for easy management of the content that does not vary from page to page. For example, rather than changing some of the content of the menu in every single page, you simply open menu include file (#top.htm) and edit the HTML within. The changes will be reflected throughout the website.

If your hosting provider supports php files (most of them does), I highly reccommend using the php version of this theme.

PHP version performance

Theme includes a php version with optimized performance: all CSS is served in a single request, same goes for Javascript. This is making your site perform better for the end user and is possible using a simple include statements and including needed css files or scripts. This way, page renders faster for the end user but stays flexible for the changes since the files are separated on the server. PHP pages which server those combined versions are called index.php and they are in respective folders: /style/skinX/index.php and /script/index.php. CSS version has a minifier included, so it's size will be reduced even more.

 

B) HTML Structure top ↑

HTML Theme version

HTML version of this theme is located in folder named '1 HTML version'.

Code

This theme uses latest HTML5 tags and structure with tableless design. All code is properly indented to make it easier to read and edit. There are also comment markers as a guides to find the beginning and end of major sections such as the header, slider, content and footer. Each of these sections is labeled with the appropriate tags and has a corresponding tag of the main element for that section.

12 columns Grid system

Theme is a multi-column, fixed width template developed with a grid system based on popular 960 grid system, but with a few improvements (containers, different padding, etc.). The grid columns syntax is the same (grid_1, grid_2... grid_12).. So if you want to make a column that is 1/3 width, you'll add it a css class of grid_4, since 4 is 1/3 of the 12 (total columns). Please see the example grid demo page for various combinations.

The general page skeleton:

Every page has the following structure: 

<html>
<head>
	<css styles... />
	<javascripts... />
</head>
<header class="container_12">
	<div id="logo">
		logo image...
	</div>
	<div id="search">
		search box...
	</div>
	<nav class="top">
		top-right small navigation...
	</nav>
</header>
<nav class="main container_12">
	main navigation multilevel menu...
</nav>

page specific content, for example:
<section id="layout" class="v1 container_12 clearfix">

secondary content, for example
<section class="portfolio secondary container_12 clearfix">

<footer class="container_12 clearfix">
	footer...
</footer>

Theme images

Logo, avatars, social icons, team member icons and big demo images are located in the /images/ subfolder

PHP Theme version

PHP version of this theme is located in folder named '2 PHP version'.

Each page has couple of include files, but most important are: #top.htm and #bottom.htm. Top file has the header, javascript and css linking tags and navigation. Bottom file has footer and credits element. Structure of each page php file is like this:

<?php include("#top.htm");?>
...
-- page content here --
...
<?php include("#bottom.htm"); ?>

Page titles

To modify each page title in PHP version, set the name of the $title variable on the top of the page to the desired title. Example:

<?php $title="Portfolio 3" ?>

C) CSS Stylestop ↑

All css files are in /style/skinX/ subfolder for each skin version of the theme. To use a specific skin, change the path - for example: 

<link href="style/skin1/" rel="stylesheet" media="all,screen" />

will set skin1styles in PHP version of the theme. In the HTML version, all stylesheets are separate files:

<link href="style/skin1/reset.css" rel="stylesheet" media="all,screen" />
<link href="style/skin1/grid.css" rel="stylesheet" media="all,screen" />
<link href="style/skin1/baseline.css" rel="stylesheet" media="all,screen" />
<link href="style/skin1/jquery.fancybox-1.3.4.css" rel="stylesheet" media="all,screen" />
<link href="style/skin1/styles.css" rel="stylesheet" media="all,screen" />

CSS files explanation

If you would like to edit a specific section of the site, find the appropriate element in the CSS file and appropriate style that needs to be edited. Code is indented & commented - all child elements are nested, so it is very easy to find what you need to change.

Grid and columns

Note there are some css classes/elements which define general styling and grid. Those are: .container_12 - 12 columns grid container; in nested subcontainers this can be from 1-11 (.container_6, for example, is 1/2 of the full width) .clearfix - global utility class to clear the floated elements (columns) in the grid. Class .secondary - is for secondary content (the content with top gradient).

Design allows modular structure, so you can make use any element from the any page and add it to the combined page. For example, you can insert any <section> element after main navigation (<nav class="main container_12">) or before footer (<footer class="container_12 clearfix">) and it will be displayed as a part of the design. As the theme has a bunch of pre-designed layouts, you can freely use section from one page and add it to the other to suit your needs. To make custom layouts, make a <section> element with .container_12 and .clearfix classes and you're good to go. For example (fictional product layout): 

<section id="product" class="container_12 clearfix">
	...product html
</section>

Sidebar

Some pages have sidebar - it's defined as <aside> element with 1/3 width of the layout (css class 'grid_4'). It's ID is 'sidebar' and css class changes for each page. Example: <aside id="sidebar" class="about">

Specific CSS stylings

All other styling is commented in the css files for further reference. Please see demo pages for specific styles.

Note
To make your customizations easily, I highly recommend you Firebug - a Firefox add-on. For more information please see this example, this one, or this one. Read more about about Firebug's css tab on official website and be sure to check out the FireDiff extension. Be sure to use it in the HTML version, since PHP version has combined files and inspect element menu option won't show proper position of the code.

Skin images

All skin images are in /img/ subfolder of each skin. There is a naming convention for images (with prefixes), to make changes easily:

backgrounds:
bg-body.png
bg-footer.png
bg-nav.png
bg-nav-active.png
bg-nav-over.png
bg-quote.png
bg-secondary.png
icons:
ico-accept.gif
ico-accept_male_user.png
ico-chart_up.png
ico-globe.png
ico-megaphone.png
ico-recycle.png
ico-refresh.png
ico-zoom.png
other images:
action-button.png
arrows-ffffff.png
buttons.png
pricing-ribbon.png

Images

All illustrative theme images (photos) were stripped from the final download in order to reduce the size of the download. However, you don't need to guess the sizes of each image for any layout - images are named according to their sizes. For example, image named 248x144b.jpg is 248 pixels wide and 144 pixels tall.

D) JavaScripts top ↑

Note
Unless you are familiar with jQuery and JavaScript, I strongly advise you not to play around with these files.

Scripts location

All theme scripts are located in the /script/ subfolder of the theme.

jQuery Framework

The theme makes use of various JavaScripts and the jQuery framework to add dynamic functionality. Scripts used are:

Portfolio filtering

Portfolio list items have css classes which defines their category: 

<ul id="portfolio">
	...
	<li class="advertising">
	...
</ul>

The filter links have those categories set as relattribute: 

<ul id="filter">
	<li>
                ...
		<a rel="advertising" href="javascript:void(null);">Advertising</a>
                ...
	</li>	
</ul>

Theme Javascript automatically connects filter buttons to categories and show/hide them as needed. Leave rel attribute empty to get filtering removed ('All').

E) Form(s) Configurationtop ↑

Form submitting

jQuery is used to submit contact form without page refresh (AJAX), and message is sent to the form-submit.php file. To change target email where message is sent: open form-submit.php located in the theme folder and change email to your email address at the top of the file:

define("WEBMASTER_EMAIL", 'myemail@domain.com');

Both forms (contact page and newsletter subscription form) are handled via AJAX. In case when user has the JavaScript turned off (less than 5% of users), submission will fallback to non-ajax form submission.

Feedback messages

The response from the server is displayed on 2 custom feedback pages. Edit those pages to customize feedback when user submits the forms:

newsletter-feedback.php
contact-feedback.php

To change ajax response messages, edit these pages normally and note that there is a specific div:

<div id="feedback">...</div>

The content of this div will be displayed as a feedback message when AJAX form sending takes place.

Client validation

Form also features client-side validation and it won't be submitted if any of the fields are empty or email address is in wrong format. This is possible with jquery.validate plugin. Validation is done through css markup classes added to form elements. All elements have required css class, and email field has email css class. These css classes don't change the layout at all, they are used to instruct validation plugin types of fields. If you want to make any of the fields optional, simply remove 'required' css class.

F) PSD Filestop ↑

All graphics were designed and exported with latest version of Adobe® Photoshop. In the PSD files, page elements which are saved as CSS sprites are placed into main file as smart objects. Best way to customize them is to double-click smart object layer, edit the element and save the changes with export for web option.

PSD Files

There are 3 PSD files, 1 per each basic color scheme:

G) How to...?top ↑

How to change logo?
Locate company logo block at the top of the page (or #top.htm file if you're using php version) and change the path of the image tag:
<!-- company logo -->
<div id="logo">
	<a href="index.php" title="CompanyName.com">
		<img src="images/logo.png" title="CompanyName.com" />
	</a>
</div>
<!-- / company logo -->
How to change background image?
Each skin has it's own /img/ folder inside. Replace file bg-body.png with a new image for the background.
How to edit menu items?
Menu items are located in the <ul id="nav"> element at the top of the page and are represented as a nested unordered list. Find menu item and change it's name and path. To add submenu items, edit the nested unordered list of the top menu element. To display menu item as a current page, add css class active to the menu item link.

H) Something's not working, what should I do?top ↑

Don't panic: it's probably a minor issue.

Although every effort has been made to ensure the theme is bug free and as easy to use as possible there is always the chance that I missed something. If you do find a problem please contact me through my profile contact form and we'll sort it out.

I) Sources and Creditstop ↑

J) Changelogtop ↑

 

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

 

 

Rvision